<style>
    #root {
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 0 5px rgba(0, 0, 0, .15);
        overflow: hidden;
    }

    .title[data=table-title] {
        width: 100%;
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        padding: 0 20px;
        color: #333;
        font-size: 14px;
        background-color: #F5F5F5;
    }

    .search[data=table-search] {
        width: 100%;
        height: 60px;
        padding: 10px 0;
    }

    .search[data=table-search] .block {
        width: 300px;
        height: 100%;
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        margin-right: 20px;
    }

    .search[data=table-search] .block span {
        width: 100px;
        display: inline-block;
        text-align: right;
        box-sizing: border-box;
        padding-right: 10px;
        font-size: 16px;
    }

    .table[data=table-content] {
        width: 100%;
        box-sizing: border-box;
        padding: 0 20px;
    }

    .footer {
        width: 100%;
        box-sizing: border-box;
        padding: 0 20px;
        padding-bottom: 20px;
        text-align: right;
    }
</style>

<body>
    <div id="root">
        <div class="title" data="table-title">患者列表</div>
        <div class="search" data="table-search">
            <div class="block">
                <span>姓名</span>
                <el-input v-model.trim="search.name" size="small" placeholder="请填写姓名" />
            </div>
            <!-- <div class="block">
                <span>联系方式</span>
                <el-input v-model="search.phone" size="small" placeholder="请填写联系方式" />
            </div> -->
            <el-button type="primary" icon="el-icon-search" size="small" clearable @click="handleSearch">查询</el-button>
            <el-button type="warning" icon="el-icon-circle-close" size="small" clearable
                @click="handleClear">清空</el-button>
        </div>
        <div class="table" v-loading="table.loading" data="table-content">
            <el-table :data="table.data" border>
                <el-table-column align="center" prop="No" width="80" label="序号">
                </el-table-column>
                <el-table-column align="center" width="150" prop="patientName" label="宝宝姓名">
                </el-table-column>
                <el-table-column align="center" width="80" prop="gender" label="性别">
                    <template slot-scope="scope">
                        {{ (scope.row.gender == 'N' || scope.row.gender == 1) ? '男' : '女' }}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="birthday" label="出生日期">
                </el-table-column>
                </el-table-column>
                <el-table-column align="center" prop="phoneNum" label="联系电话">
                </el-table-column>
                <el-table-column align="center" prop="createTime" label="建档日期">
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleToArchives(scope.row)">查看建档</el-button>
                        <el-button type="text" @click="handleToRecord(scope.row)">评测记录</el-button>
                        <el-button type="text" @click="handleSetting(scope.row)">设置</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="footer">
            <el-pagination background @current-change="handleChangeCurrent" layout="prev, pager, next, total"
                :page-size="table.data.size" :total="table.total">
            </el-pagination>
        </div>
    </div>
</body>
<script>
    require(['bbcare'], function ($bb) {
        var URL = $bb.baseUrl("scaleHost")
        console.log("URL",URL)
        var FollowURL = $bb.baseUrl('followup')

        var vm = new Vue({
            el: '#root',
            data: function () {
                return {
                    search: {
                        name: '',
                        phone: ''
                    },
                    table: {
                        current: 1,
                        size: 10,
                        total: 0,
                        data: [],
                        loading: false,
                    }
                }
            },
            created: function () {
                this.getTableList()
                this.cleanSessionStorage()
            },
            methods: {
                /**
                 * 开始查询
                 */
                handleSearch: function () {
                    this.getTableList()
                },
                /**
                 * 清空查询框并重新搜索
                 */
                handleClear: function () {
                    this.search = {
                        name: '',
                        phone: ''
                    }
                    this.getTableList()
                },
                /**
                 * 查看建档
                 * @param { object } row
                 */
                handleToArchives: function (row) {
                    this.getFollowUpList(row.patientName, function (res) {
                        var o = res.rows[0]
                        var params = {
                            patientSchemeId: o.patientSchemeId,
                            followQueueId: o.followQueueId,
                            patientName: o.patientName,
                            queuename: o.followQueueName,
                            patientId: o.patientId,
                            imgSrc: o.gender == 'N' ? 'page/followup/imgs/comm/boy_Ahmu.png' : 'page/followup/imgs/comm/girl_Ahmu.png'
                        }
                        $bb.openPage("outPatient", params)
                    })
                },
                /**
                 * 评测记录
                 * @param { object } row
                 */
                handleToRecord: function (row) {
                    sessionStorage.setItem('composeUser', JSON.stringify({
                        type: 'record',
                        data: row
                    }))
                    $bb.openPage('recordAndSetting')
                },
                /**
                 * 设置
                 * @param { object } row
                 */
                handleSetting: function (row) {
                    sessionStorage.setItem('composeUser', JSON.stringify({
                        type: 'setting',
                        data: row
                    }))
                    $bb.openPage('recordAndSetting')
                },
                /**
                 * 改变页码后请求
                 * @param { number } val 页码
                 */
                handleChangeCurrent: function (val) {
                    this.table.current = val
                    this.getTableList()
                },
                /**
                 * 获取列表数据
                 */
                getTableList: function () {
                    var patientSource = sessionStorage.getItem('account') ? JSON.parse(sessionStorage.getItem('account')).id : ''
                    var that = this
                    this.table.loading = true
                    $bb.ajax({
                        url: URL + 'web/scale/getPatientList',
                        data: JSON.stringify({
                            limit: this.table.size,
                            page: this.table.current,
                            patientSource: patientSource,
                            patientName: this.search.name,
                            phoneNum: this.search.phone
                        }),
                        success: function (res) {
                            if (res.code == 500) location.href = location.href
                            res.page.records.forEach(function (r, i) {
                                r.No = (that.table.current - 1) * that.table.size + i + 1
                            })
                            if (res.page.records.length == 0) {
                                that.getFollowUpList(that.search.name, function (res) {
                                    res.rows.forEach(function (r, i) {
                                        r.No = (that.table.current - 1) * that.table.size + i + 1
                                    })
                                    that.table.loading = false
                                    that.table.data = res.rows,
                                        that.table.total = res.total
                                })
                                return
                            }
                            that.table.loading = false
                            that.table.data = res.page.records
                            that.table.total = res.page.total
                        }
                    })
                },
                getFollowUpList: function (name, callback) {
                    $bb.ajax({
                        url: FollowURL + 'followup/service/patient/patientListDataCenterQuery',
                        data: JSON.stringify({
                            data: {
                                args: JSON.stringify({
                                    draw: this.table.current - 1,
                                    columns: [],
                                    order: [],
                                    start: (this.table.current - 1) * this.table.size,
                                    length: 10
                                }),
                                patientName: name,
                                phoneNum: ''
                            }
                        }),
                        success: function (res) {
                            if (res.code == 500) location.href = location.href
                            callback(res)
                        }
                    })
                },
                /**
                 * 清除掉 SessionStorage 的内容
                 */
                cleanSessionStorage: function () {
                    sessionStorage.getItem('composeUser') && sessionStorage.removeItem('composeUser')
                }
            }
        })
    })
</script>
